<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<body>
		<div style="border: 1px solid red;margin: 100px auto;width: 700px;height: 500px;background: white;position: relative;">	
			<input type="button" style="position: absolute;bottom: -100px;right: -100px;">
		</div>
		
	</body>
	<script src="js/tools.js"></script>
	<script>
		const div={
		width:700,
		height:500,
		element:$("div")[0],
		addkids:function(kid){
			this.element.appendChild(kid.element);			
		}
		}
		function Gong({width,height,background,x,y,speed,spee}){
			this.width=width;
			this.height=height;
			this.background=background;
			this.element=null;			
			this.x=x;
			this.y=y;
			this.speed=speed;
			this.spee=spee;
		    this.createDom();						
		}
		
		Gong.prototype.createDom=function(){
		const self=this.element=document.createElement("div");
		self.style.position="absolute";
		self.style.background=`${this.background}`;
		self.style.width=this.width+"px";
		self.style.height=this.height+"px";
		self.style.left=this.x+"px";
		self.style.top=this.y+"px";
		div.addkids(this);	
		}	
		Gong.prototype.move=function(){

			this.x+=this.speed;
			this.y+=this.spee;
			if(this.x<=0)
			this.speed=5;
			else if(this.x>=div.width)
			this.speed=-5;
			if(this.y<=0)
			this.spee=5;
			else if(this.y>=div.height)
			this.spee=-5;
			this.element.style.left=this.x+"px";
		    this.element.style.top=this.y+"px";}
		
		function P(){
			Gong.call(this,{
				width:30,
				height:50,
			    background:"orange",			    
			    x:0,
			    y:0,
			    speed:5,
			    spee:5,
			})			
		}
		P.prototype=Object.create(Gong.prototype);
		
		function H1(){
			Gong.call(this,{
				width:30,
				height:50,
			    background:"red",			    
			    x:100,
			    y:0,
			    speed:5,
			    spee:5
			})			
		}
		H1.prototype=Object.create(Gong.prototype);
		
		var p=new P();
       
   	 var 	time=setInterval(function(){p.move()},1000/60);
       
		var h=new H1();
		
  var 	timer=setInterval(function(){h.move()},1000/60);
        
        $("input")[0].onclick=function(){
        	clearInterval(time);
        	clearInterval(timer);
        	time=setInterval(function(){p.move()},1000/60);
        	timer=setInterval(function(){h.move()},1000/60);
          
        }
        console.log(typeof(p.move))
	</script>
</html>
